<template>
  <div class="dc-dia">
    <div class="dialog-top">
      <p style="display: block">电池编号：{{ barInfoObj.batteryNo }}</p>
      <!-- <p style="display: block">
        状态：
        {{ barInfoObj.chargeStatus == "CHARGE" ? "充电中" : "" }}
        {{ barInfoObj.chargeStatus == "FULL" ? "已充满" : "" }}
        {{ barInfoObj.chargeStatus == "STOP" ? "未充电" : "" }}
      </p> -->
      <p style="display: block">数据更新时间：{{ barInfoObj.createTime }}</p>
    </div>
    <div class="dialog-bt">
      <div class="flex">
        <div class="e-con">
          <div style="height: 5px"></div>
          <div class="battery">
            <div class="b-value" :style="{ height: barInfoObj.ratio + '%' }"></div>
            <div class="big-text">
              <div>{{ barInfoObj.ratio }}</div>
              <div class="unit">%</div>
            </div>
          </div>
        </div>

        <div class="e-label-full">
          <div class="e-label-full-con">
            <div class="label">电池电压</div>
            <div class="e-label-v">{{ barInfoObj.voltage || 0 }}V</div>
          </div>
          <div class="e-label-full-con">
            <div class="label">电池电流</div>
            <div class="e-label-v">{{ barInfoObj.current || 0 }}A</div>
          </div>
        </div>

        <div class="e-label-full">
          <div class="e-label-full-con">
            <div class="label">电芯温度</div>
            <div class="e-label-v">{{ barInfoObj.temp || 0 }}℃</div>
          </div>
          <div class="e-label-full-con">
            <div class="label">充电回路</div>
            <div class="e-label-v">
              <!-- {{ barInfoObj.onOff == 'OPEN'?'开':'关' }} -->
              -
            </div>
          </div>
        </div>

        <div class="e-label-full">
          <div class="e-label-full-con">
            <div class="label">电池SOH</div>
            <div class="e-label-v">{{ barInfoObj.health || 0 }}%</div>
          </div>
          <div class="e-label-full-con">
            <div class="label">循环次数</div>
            <div class="e-label-v">{{ barInfoObj.useNum || 0 }}</div>
          </div>
        </div>
        <div class="e-label-full">
          <!-- <div class="e-label-full-con">
            <div class="label">额定电压</div>
            <div class="e-label-v">{{ barInfoObj.rated || 0 }}V</div>
          </div> -->
          <div class="e-label-full-con">
            <div class="label">额定容量</div>
            <div class="e-label-v">{{ Number(barInfoObj.volume || 0).toFixed(1) }}AH</div>
          </div>
          <div class="e-label-full-con">
            <div class="label">剩余容量</div>
            <div class="e-label-v">
              {{ Number((barInfoObj.volume * barInfoObj.ratio) / 100 || 0).toFixed(1) }}AH
            </div>
          </div>
        </div>
      </div>
      <div class="flex-p">
        <div>
          电芯状态（{{ barInfoObj.coreVoltage ? barInfoObj.coreVoltage.length : 0 }}）
        </div>
        <div>最大电压差{{ (max - min).toFixed(3) }}V</div>
      </div>
      <div class="flex" style="grid-template-columns: repeat(9, 1fr)">
        <div
          class="flex-status"
          v-for="(item, index) of barInfoObj.coreVoltage"
          :key="index"
          :class="{ max: index == maxIndex, min: index == minIndex }"
        >
          <span class="bottom-border-g">电芯 {{ index + 1 }}</span>
          <div class="flex-value">{{ item }}v</div>
        </div>
      </div>
      <div class="flex-p">
        <div>故障警告</div>
      </div>
      <err-msg :err="err" v-if="err" />
    </div>
  </div>
</template>

<script>
import errMsg from "./errMsg";
export default {
  props: {
    err: {
      type: Object,
      default: {},
    },
    barInfoObj: {
      type: Object,
      default: {},
    },
    max: {
      type: Number,
      default: 0,
    },
    min: {
      type: Number,
      default: 0,
    },
    maxIndex: {
      type: Number,
      default: 0,
    },
    minIndex: {
      type: Number,
      default: 0,
    },
  },
  components: {
    errMsg,
  },
  mounted() {
    console.log(this.err);
    console.log(this.barInfoObj);
  },
  methods: {},
};
</script>

<style scoped>
.flex {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 20px;
  /* -webkit-box-pack: justify; */
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.e-con {
  text-align: center;
  width: 90px;
  height: 140px;
  border-radius: 10px;
  position: relative;
  -webkit-box-shadow: 4px 4px 8px #afb3b8, -4px -4px 8px #fff;
  box-shadow: 4px 4px 8px #afb3b8, -4px -4px 8px #fff;
}

.battery {
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  height: 130px;
  width: 80px;
  overflow: hidden;
  position: relative;
  border: 2px solid #86d481;
  padding: 1px;
  display: inline-block;
}

.b-value {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 40%;
  background-color: #90eebe;
  background-image: linear-gradient(125deg, #90eebe, #5bd685 34%, #22ee37 77%);
}

.big-text {
  font-size: 30px;
  font-weight: 600;
  color: #253027;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.big-text .unit {
  width: 100%;
  text-align: center;
  font-size: 20px;
  height: 20px;
  font-weight: 400;
}

.e-label-full {
  position: relative;
  width: 177px;
  margin-left: 27px;
  height: 140px;
  border-radius: 6px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-shadow: 3px 3px 6px #afb3b8, -3px -3px 6px #fff;
  box-shadow: 3px 3px 6px #afb3b8, -3px -3px 6px #fff;
  flex-direction: column;
  justify-content: space-between;
}

.e-label-full-con {
  position: relative;
  width: 140px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.e-label-con {
  position: relative;
  width: 140px;
  margin-left: 27px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 10px;
  -webkit-box-shadow: 3px 3px 6px #afb3b8, -3px -3px 6px #fff;
  box-shadow: 3px 3px 6px #afb3b8, -3px -3px 6px #fff;
}

.e-label-con .label,
.e-label-full-con .label {
  width: 75px;
  text-align: center;
}

.e-label-v {
  margin-right: 0;
  margin-left: auto;
  width: 65px;
  text-align: center;
}

.e-label-con:after,
.e-label-full-con:after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 60px;
  height: calc(100% - 8px);
  border-radius: 4px;
  overflow: hidden;
  -webkit-box-shadow: inset 3px 3px 6px #afb3b8, inset -3px -3px 6px #fff;
  box-shadow: inset 3px 3px 6px #afb3b8, inset -3px -3px 6px #fff;
}

.flex-status {
  padding: 5px;
  text-align: center;
  width: 90px;
  border-radius: 6px;
  position: relative;
  -webkit-box-shadow: 3px 3px 6px #afb3b8, -3px -3px 6px #fff;
  box-shadow: 3px 3px 6px #afb3b8, -3px -3px 6px #fff;
  height: 70px;
}

.flex-status.max {
  background-color: rgb(253 201 201);
}
.flex-status.max .bottom-border-g {
  color: #ff0000;
}
.flex-status.max .flex-value {
  color: #ff0000;
}
.flex-status.min {
  background-color: #65e365;
}
.flex-status.min .bottom-border-g {
  color: #1e701e;
}
.flex-status.min .flex-value {
  color: #1e701e;
}

.bottom-border-g {
  display: inline-block;
  padding-bottom: 3px;
}

.flex-value {
  width: calc(100% - 8px);
  text-align: center;
  position: absolute;
  bottom: 8px;
  left: 4px;
  border-radius: 6px;
  height: 30px;
  color: #111;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: bold;
}

.flex-status:after {
  content: "";
  position: absolute;
  top: 32px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 40px);
  border-radius: 4px;
  overflow: hidden;
  -webkit-box-shadow: inset 3px 3px 6px #afb3b8, inset -3px -3px 6px #fff;
  box-shadow: inset 3px 3px 6px #afb3b8, inset -3px -3px 6px #fff;
}

.dialog-top {
  width: 100%;
  height: auto;
  -webkit-box-shadow: 3px 3px 6px #afb3b8, -3px -3px 6px #fff;
  box-shadow: 3px 3px 6px #afb3b8, -3px -3px 6px #fff;
  height: auto;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dialog-top p {
  display: inline-block;
  margin: 0;
  line-height: 2;
}

.fm-h2 {
  font-size: 18px;
  padding-left: 10px;
  line-height: 1;
  border-left: solid #3eacef 6px;
}

.fm-h3 {
  font-size: 16px;
  line-height: 1.5;
  margin-top: 0;
  margin-left: 20px;
}
.flex-p {
  display: flex;
  width: 100%;
  margin: 20px 0;
  font-size: 16px;
}
.flex-p div {
  margin-right: 15px;
}
</style>
